<template>
  <view class="viewport">
    <view class="header" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <view class="left icon-left" @tap="Onleft()"></view>
      <uni-title type="h1" align="center" title="商品明细" class="text"></uni-title>
      <view class="right icon-sort" @tap="orderby()"></view>
    </view>
    <!-- 具体明细 -->
    <scroll-view enable-back-to-top scroll-y class="scroll">
      <uni-section :title="form.TimeScope + '-' + (form.GoodsType || form.Require)" type="line">
        <view class="content">
          <view class="detail" v-for="dataCount in data" :key="dataCount.MonthDay">
            <view class="tip">
              <view>{{ dataCount.MonthDay }} {{ dataCount.Week }}</view>
              <view>收支:{{ dataCount.TotalAmount }}</view>
            </view>
            <view class="content" v-for="data in dataCount.Data" :key="data.ID">
              <view class="name" @tap="OnUpdateGood(data?.ID)">
                <view
                  v-if="data?.GoodsIcon.startsWith('icon')"
                  class="circle"
                  :class="data?.GoodsIcon"
                ></view>
                <view v-else class="circle bold">{{ data?.GoodsIcon }}</view>
                <view>{{ data.Goods }}</view>
                <view class="userName">{{ data.UserName }}</view>
                <view class="userName">{{ data.AccountTypeName }}</view>
              </view>
              <view>{{ data.Amount }}</view>
            </view>
          </view>
        </view>
      </uni-section>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { GetDetailDataAPI, type GetDetailDataParams } from '@/services/detail'
import { useMemberStore } from '@/stores'
import type { DataCount, UserSetting } from '@/types/detail'
import type { GetAccountResponse } from '@/types/zichan'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取会员信息
const memberStore = useMemberStore()
const form = ref<GetDetailDataParams>({
  UserName: '',
  DealYear: 2024,
  DealMonth: 0,
  AccountNo: '',
  Auth: '',
  DealDay: 0,
  GoodsType: '',
  Goods: '',
  InOut: 0,
  TimeScope: '',
  OrderBy: 1,
  Require: '',
  UserGroup: '',
  LoginName: '',
})
const pwd = ref('')
const amount = ref(0)
const showMask = ref(true)
const userSetting = ref<UserSetting>()
const data = ref<DataCount[]>()
const getAccountResponse = ref<GetAccountResponse>()
//计算属性
const maskedAmount = computed(() => {
  if (showMask.value) {
    const amountStr = getAccountResponse.value?.Amount.toString() || ''
    const maskedStr = '*'.repeat(amountStr.length)
    return maskedStr
  } else {
    return getAccountResponse.value?.Amount
  }
})
// 定义 props 接收
const query = defineProps<{
  GoodsType: string
  DealYear: number
  DealMonth: number
  DealDay: number
  AccountNo: string
  InOut: number
  TimeScope: string
  Require: string
}>()

onShow(async () => {
  reFresh()
})
//修改商品
const OnUpdateGood = async (id: any) => {
  // await UpdateGoodAPI({
  //   ID: goodDetail.value!.ID,
  //   Auth: '07230602',
  //   AccountNo: goodDetail.value!.AccountNo,
  //   Amount: goodDetail.value!.Amount,
  //   IsNotYuSuan: goodDetail.value!.IsNotYuSuan,
  // })
  // popup.value?.close()
  // reFresh()
  uni.reLaunch({
    url:
      '/pages/NoteAcount/NoteAcount?pageType=update&id=' +
      id +
      '&backPage=/pages/count/SearchGoods?GoodsType=' +
      encodeURIComponent(
        query.GoodsType +
          '&DealYear=' +
          query.DealYear +
          '&Require=' +
          query.Require +
          '&DealMonth=' +
          query.DealMonth +
          '&InOut=' +
          query.InOut +
          '&TimeScope=' +
          query.TimeScope,
      ),
  })
}
//加载初始化
onLoad(async () => {
  form.value.GoodsType = query.GoodsType
  form.value.DealYear = query.DealYear
  form.value.DealMonth = query.DealMonth
  form.value.AccountNo = query.AccountNo
  form.value.DealDay = query.DealDay
  form.value.InOut = query.InOut
  form.value.TimeScope = query.TimeScope
  form.value.Require = query.Require
  form.value.Auth = memberStore.profile!.Token
  form.value.UserGroup = memberStore.profile!.UserGroup
  form.value.LoginName = memberStore.profile!.UserName
  reFresh()
})
const orderby = async () => {
  form.value.OrderBy = form.value.OrderBy == 1 ? 2 : 1
  await reFresh()
}
//刷新事件
const reFresh = async () => {
  if (memberStore.profile) {
    const res = await GetDetailDataAPI(form.value)
    data.value = res.result
    uni.showToast({ icon: 'success', title: '刷新成功' })
  } else {
    uni.showToast({ icon: 'none', title: '请先登录' })
    setTimeout(() => {
      // 页面跳转
      uni.switchTab({ url: '/pages/my/my' })
    }, 500)
  }
}
//日期改变
const bindDateChange = (e: any) => {
  const [year, month] = e.detail.value.split('-')
  form.value.DealYear = year
  form.value.DealMonth = month
  reFresh()
}
//返回
const Onleft = () => {
  uni.reLaunch({
    url: '/pages/count/count',
  })
}
</script>

<style lang="scss">
@import './styles/SearchGoods.scss';
</style>
